<template>
  <div class="order-list">
    <van-list v-model="loading" finished-text="没有更多了" :finished="!loading">
      <order-list-item v-for="order in orders" :key="order.id" :order="order"
                       @cancel="refreshOrders"
                       @receipt="refreshOrders"/>
    </van-list>
  </div>
</template>

<script>
import { message, order, security } from "@mall/api-services"
import OrderListItem from "@/components/order/OrderListItem"
import { List, Toast } from "vant"

export default {
  name: "OrderList",
  components: {
    OrderListItem,
    [List.name]: List,
  },
  props: {
    statuses: Array,
    reviewStatuses: Array,
    name: String,
  },
  data() {
    return {
      loading: false,
      orders: [],
    }
  },
  created() {
    this.refreshOrders()
  },
  methods: {
    refreshOrders() {
      this.loading = true
      order.OrderServiceV1.createOrderQuery()
          .customerId(security.SubjectHolder.getUser().id)
          .statuses(this.statuses)
          .reviewStatuses(this.reviewStatuses)
          .list()
          .then(pagedOrder => {
            this.orders = pagedOrder.elements
          })
          .catch(({ response }) => Toast(message.getResponseMessage(response)))
          .finally(() => this.loading = false)
    },
  },
}
</script>

<style lang="scss" scoped>
.order-list {

}
</style>
